<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>长乐未央 - 用户注册</title>
    <style>
        body {
            margin: 20px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        input[type="text"] {
            width: 40%;
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
            height: 40px;
            outline: none;
        }

        #captchaData {
            cursor: pointer;
            display: inline-block;
            vertical-align: middle;
            margin-left: 10px;
        }

        button {
            font-size: 19px;
            font-weight: bold;
            width: 320px;
            height: 60px;
            border-radius: 50px;
            background-color: #e29447;
            color: #fff !important;
            text-shadow: none;
            border: none;
            cursor: pointer;
        }

        button:hover {
            background-color: #ebb683;
        }
    </style>
</head>

<body>

    <div id="app">
        <h1>长乐未央 - 用户注册</h1>
        <div class="form-group">
            <label for="email">邮箱</label>
            <input type="text" id="email" v-model="form.email">
        </div>
        <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" id="username" v-model="form.username">
        </div>
        <div class="form-group">
            <label for="nickname">昵称</label>
            <input type="text" id="nickname" v-model="form.nickname">
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="text" id="password" v-model="form.password">
        </div>

        <div class="form-group">
            <label for="password">验证码</label>
            <input type="text" id="captchaText" v-model="form.captchaText">
            <div id="captchaData" v-html="captchaData" @click="fetchCaptcha" title="点击刷新验证码"></div>
        </div>

        <button @click="submitForm">注册</button>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        const { createApp, ref } = Vue;
        const API = 'http://localhost:3000';

        createApp({
            setup() {
                const captchaData = ref('');
                const form = ref({
                    email: '',
                    username: '',
                    nickname: '',
                    password: '',
                    captchaKey: '',
                    captchaText: ''
                });

                /**
                 * 获取验证码
                 * @returns {Promise<void>}
                 */
                const fetchCaptcha = async () => {
                    try {
                        const random = Math.random();
                        const res = await axios.get(`${API}/captcha?random=${random}`);
                        captchaData.value = res.data.data.captchaSvg;
                        form.value.captchaKey = res.data.data.captchaKey;
                    } catch (error) {
                        console.error('获取验证码失败:', error);
                    }
                };

                fetchCaptcha();

                /**
                 * 提交表单
                 * @returns {Promise<void>}
                 */
                const submitForm = async () => {
                    try {
                        const res = await axios.post(`${API}/auth/sign_up`, form.value);
                        alert(res.data.message);
                    } catch (error) {
                        const { data } = error.response;
                        const info = data.errors.join('\n');
                        alert(info);
                    }
                };

                return {
                    form,
                    captchaData,
                    fetchCaptcha,
                    submitForm
                };
            }
        }).mount('#app');
    </script>

</body>

</html>
